<div class="content">
  <div class="title">
    <button mat-button color="primary" class="add-btn" (click)="onOpenAdd()" *ngIf="isAdmin">添加</button>
  </div>
  <div class="grid">
    <table mat-table [dataSource]="users | paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById">
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox (change)="$event? allToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()"
          >
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let row">
          <mat-checkbox (change)="$event ? selection.toggle(row): null"
                        (click)="$event.stopPropagation()"
                        [checked]="selection.isSelected(row)">
          </mat-checkbox>
        </td>
      </ng-container>

      <ng-container matColumnDef="username">
        <th mat-header-cell *matHeaderCellDef>用户名</th>
        <td mat-cell *matCellDef="let row ">{{ row.username }}</td>
      </ng-container>

      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>姓名</th>
        <td mat-cell *matCellDef="let row ">{{ row.realName }}</td>
      </ng-container>

      <ng-container matColumnDef="brand">
        <th mat-header-cell *matHeaderCellDef>邮箱</th>
        <td mat-cell *matCellDef="let row">{{ row.email }}</td>
      </ng-container>

      <ng-container matColumnDef="type">
        <th mat-header-cell *matHeaderCellDef>电话</th>
        <td mat-cell *matCellDef="let row">{{ row.phone }}</td>
      </ng-container>

      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>职位</th>
        <td mat-cell *matCellDef="let row">{{ row.job }}</td>
      </ng-container>

      <ng-container matColumnDef="createDate">
        <th mat-header-cell *matHeaderCellDef>部门</th>
        <td mat-cell *matCellDef="let row">{{ row.sysDepartment?.departName }}</td>
      </ng-container>

      <ng-container matColumnDef="department">
        <th mat-header-cell *matHeaderCellDef>住址</th>
        <td mat-cell *matCellDef="let row">{{ row.address }}</td>
      </ng-container>

      <ng-container matColumnDef="user">
        <th mat-header-cell *matHeaderCellDef>头像</th>
        <td mat-cell *matCellDef="let row">{{ row.assetUserId }}</td>
      </ng-container>



      <ng-container matColumnDef="operate">
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td mat-cell *matCellDef="let row">
          <button mat-button (click)="onOpenEdit(row)">编辑</button>
          <button mat-button (click)="onDelete(row.id)">删除</button>
          <button mat-button *ngIf="row.status === 0" (click)="onAccept(row)">批准</button>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="cols"></tr>
      <tr mat-row *matRowDef="let data; columns: cols"></tr>

    </table>

    <app-pagination
      (pageChange)="onPageChanged($event)"
      [maxSize]="9"
      [isShowInput]="true"
      [isMiniMode]="false"
      [total]="total"
    >
    </app-pagination>
  </div>
</div>
